<template>
  <div>
    <div class="books" v-if="!isSearchPageShow">
      <Search @searchPageShow="isSearchPageShow = true"></Search>
      <div class="books-area">
        <div class="jin-xuan">
          <img class="jing-xuan-image" src="//cs-static-assets.oss-cn-beijing.aliyuncs.com/jiudao_miniapp/jingxuan.png" alt="精选image">
        </div>
        <div class="books-list">
          <PreBook v-for="(item, index) in booksList" :key="index" :preBook="item"></PreBook>
        </div>
      </div>
    </div>
    <SearchPage v-if="isSearchPageShow" @searchPageHide="isSearchPageShow = false"></SearchPage>
  </div>
</template>

<script>
import Search from '../../components/search/index'
import PreBook from '../../components/perbook/index'
import SearchPage from '../search-page/index'
import request from '../../utils/request'
export default {
  data() {
    return {
      booksList: [],
      isSearchPageShow: false
    }
  },
  components: { Search, PreBook, SearchPage },
  onShow() {
    // 在page页面中每次都会执行，在组件中第一次不会执行
    request({
      url: 'book/hot_list'
    }).then((result) => {
      this.booksList = result
    })
  }
};
</script>

<style scoped>
.books-area {
  padding-top: 130rpx;
  min-height: 100vh;
  background-color: #eee;
}
.jin-xuan {
  height: 60rpx;
  line-height: 60rpx;
  text-align: center;
}
.jing-xuan-image {
  width: 120rpx;
  height: 30rpx;
}
.books-list {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
</style>